<template>
    <div class="sub_nav_bar_right">
        <header>
            <img :src="subNavRightImgSrc[1]" alt="">
            <div>权威排行榜</div>
        </header>
        <div class="content">
            <div>
                <div>华东</div>
                <img :src="subNavRightImgSrc[2]" alt="">
                <span>华东避暑酒店榜</span>
            </div>
            <div>
                <div>华东</div>
                <img :src="subNavRightImgSrc[3]" alt="">
                <span>华东演出榜</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        data () {
            return {
                subNavRightImgSrc:[]
            }
        },
        components: {

        },
        mounted () {
            let totalImgSrc=this.$parent.$parent.imgSrc
            this.subNavRightImgSrc=totalImgSrc
        }
    }
</script>

<style scoped lang='less'>
.sub_nav_bar_right{
    width: 172px;
    height: 100%;
    padding: 8px;
    border-radius: 10px;
    background-color: #fff;
    header{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 20px;
        margin-bottom: 5px;
        img{
            height: 100%;
        }
        div{
            width: 70px;
            line-height: 20px;
            color: red;
            font-size: 12px;
            text-align: center;
            background-color: #fdefd2;
        }
    }
    .content{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 102px;
        div{
            display: flex;
            position: relative;
            flex-direction: column;
            width: 75px;
            height: 100%;
            div{
                position: absolute;
                width: 30px;
                height: 17px;
                padding: 0 3px 0;
                font-size: 10px;
                border-radius: 6px 0 6px 0;
                background-color: #f8e1bd;
            }
            img{
                width: 100%;
                height: 84px;
                border-radius: 6px;
            }
            span{
                margin-top: 5px;
                font-size: 11px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>
